<template>
  <view class="my-settle-container">
    <view class="radio">
      <radio color="#c00000" :checked="isAllCheck" @click="clickAllChecks"
        >全选</radio
      >
    </view>
    <!--  -->
    <view class="box-amount">
      合计:
      <text class="amount">￥{{ getSelectAmount }}</text>
    </view>
    <view
      class="btn-settle"
      @click="settle"
      :style="{ 'background-color': getSelectTotal === 0 ? '#ccc' : '#c00000' }"
    >
      结算{{ getSelectTotal }}
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {
      // 3秒
      time: 3,
      // 定时器,-1代表刚开始定义的时候没有
      timer: -1
    }
  },
  computed: {
    ...mapGetters('cart', [
      'getSelectTotal',
      'getSelectAmount',
      'getTotal',
      'isAllCheck',
      'getCartList'
    ]),
    // 在仓库\store\modules\cart.js 也定义了这个方法,效果一样isAllCheck
    // isAllCheck () {
    // 获取选中的数量,和商品总数量比较,
    //   return this.getSelectTotal === this.getTotal
    // }
    ...mapGetters('user', ['getAddress', 'getToken', 'addressStr'])
  },
  methods: {
    ...mapMutations('cart', ['updateAllGoodsState']),
    ...mapMutations('user', ['setNavUrl']),
    // radio的点击事件
    clickAllChecks () {
      this.updateAllGoodsState(!this.isAllCheck)
    },
    // 结算的点事件
    async settle () {
      // 判断是否选择了商品
      if (this.getSelectTotal === 0) {
        uni.showToast({
          title: '至少选择一件商品进行结算!',
          icon: 'none',
          duration: 1000
        })
        return
      }
      //   判断是否选择了收货地址
      if (!this.getAddress) {
        uni.showToast({
          title: '请选择收货地址!',
          icon: 'none',
          duration: 1000
        })
      }
      //   判断否是登陆
      if (!this.getToken) {
        this.delayNav()
        return
      }
      // 下单（生成订单）
      //(第一步111),下单之前,,,准备好要提交的参数
      const params = {
        // order_price: this.getSelectAmount, // 订单总价格
        order_price: 1,
        consignee_addr: this.addressStr, // 收货地址
        // 订单数组
        goods: this.getCartList
          // 先调用filter过滤,,,把选中下单的商品状态过滤出来
          .filter(item => item.goods_state)
          // 后台只要下面这3个字段的数据,所以生成一个新数组并且返回
          .map(item => {
            return {
              goods_id: item.goods_id,
              goods_number: item.goods_number,
              goods_price: item.goods_price
            }
          })
      }
      console.log('params', params)
      // (第二步222)在下单请求之前,必须携带token,utils\request.js里面定义携带好token
      // 在当前页面携带token也行,,,写在request.js是全局都能使用
      const resparams = await uni.$request({
        url: 'my/orders/create',
        method: 'POST',
        data: params
      })
      console.log('resparams', resparams)
      // 等于200说明请求成功,,,不等于200阻止代码往下运行
      if (resparams.meta.status !== 200) return
      // 通过上面的打印可以,获取订单号  order_number: "HMDD20210812000000003384"
      // 把订单号解构出来
      const { order_number } = resparams.message

      // (第三步333)支付(拿到订到号就进行支付逻辑)
      // (发请求) ,,,获取支付参数,后台定义的请求参数就一个订单号 order_number
      const res2 = await uni.$request({
        url: 'my/orders/req_unifiedorder',
        method: 'POST',
        data: {
          order_number
        }
      })
      // 打印得 message里面的 pay对象里面有5个参数
      // nonceStr: "HhjZ7Wv2B2Xmf2yF"
      // package: "prepay_id=wx12163931143606f9b67907c236e1720000"
      // paySign: "224551F8F6F2B06313D2F5C47B21F434"
      // signType: "MD5"
      // timeStamp: "1628757579"
      // 这5个参数就是接来调用微信api requestPayment需要用到的
      console.log('res2', res2) // 如果到这里打印提示订单不能为空,,,最大的可能性就是订单号有错误
      if (res2.meta.status === 200) {
        // 2、调用 uni.requestPayment 这个api，传递五个参数，就会弹出支付框（微信提供的）
        // 必须是企业微信才能弹框
        uni.requestPayment({
          // 展开写法(因为pay也是一个对象,所以不能直接res2.message.pay)
          ...res2.message.pay,
          success: async result => {
            // 3、支付成功之后，发送请求,告知后台，该笔订单支付成功了
            const res3 = await uni.$request({
              url: 'my/orders/chkOrder',
              method: 'POST',
              data: {
                order_number
              }
            })

            if (res3.meta.status === 200) {
              // 提示
              uni.showToast({
                title: res3.message,
                icon: 'success',
                mask: true,
                duration: 1000
              })
            }
          },
          fail: ({ errMsg }) => {
            if (errMsg === 'requestPayment:fail cancel') {
              uni.showToast({
                title: '您取消了支付!',
                icon: 'none',
                mask: true,
                duration: 1000
              })
            } else {
              uni.showToast({
                title: '支付失败，请联系客服!',
                icon: 'none',
                mask: true,
                duration: 1000
              })
            }
          }
        })
      }
    },
    // delay延迟的意思
    // 倒计时,然后跳转到我的页面(登陆页面)
    delayNav () {
      // 封装的一个提示信息用的
      this.showTip(this.time)
      this.timer = setInterval(() => {
        if (this.time <= 1) {
          // 跳转之前把定时器关闭,把时间设置为之前的3
          clearInterval(this.timer)
          this.time = 3
          //   跳转到等的页面
          uni.switchTab({
            url: '/pages/my/index',
            success: () => {
              // 保存地址到仓库
              this.setNavUrl('/pages/cart/index')
            }
          })
          return
        }
        // 时间在减减之前必须做上面的判断
        this.time--
        // 把time--的时间传递下面的,showTip()方法
        this.showTip(this.time)
      }, 1000)
    },
    showTip (time) {
      uni.showToast({
        title: `您还未登陆,${time}秒后带跳转到登陆页面`,
        icon: 'none',
        duration: 1000,
        mask: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-settle-container {
  position: fixed;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 50px;
  // 将背景色从 cyan 改为 white
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;

  .radio {
    display: flex;
    align-items: center;
  }
  .box-amount {
    margin-left: 60px;
    .amount {
      color: #c00000;
      font-size: 16px;
    }
  }

  .btn-settle {
    height: 50px;
    min-width: 100px;
    background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    margin-right: 15px;
    font-size: 18px;
    border-radius: 25px;
  }
}
</style>
